<template>
  <div class="num-box">
    <div class="num-list" v-for="item in styObj" :style="[item]">{{ item.label }}</div>

  </div>
</template>

<script>
export default {
  props: ['number'],
  data() {
    return {
      styObj: null,
      Timer: null,
      numHeight: 60,
    }
  },
  mounted() {
    this.Timer = setInterval(() => {
      this.fresh()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.Timer)
    this.Timer = null
  },
  methods: {
    fresh() {
      let arr = []
      let numStr = this.number ? this.number.toString() : '0'
      let len = numStr.length
      for (let i = 0; i < len; i++) {
        let obj = {
          label: '0',
          transform: `translateY(0)`,
          transition: 'none',
        }
        arr.push(obj)
      }
      console.log('----3', arr)
      this.styObj = arr
      setTimeout(() => {
        this.newSty()
      }, 500)
    },
    newSty() {
      let arr = []
      let numStr = this.number ? this.number.toString() : '0'
      let len = numStr.length
      for (let i = 0; i < len; i++) {
        let transY = 0
        if (numStr[i] === '.') {
          transY = this.numHeight * 10
        } else if (numStr[i] === ',') {
          transY = this.numHeight * 11
        } else {
          transY = this.numHeight * numStr[i]
        }
        let obj = {
          label: numStr[i],
          transform: `translateY(-${transY}px)`,
          transition: 'transform 2s',
        }
        arr.push(obj)
      }
      console.log('------4', arr)
      this.styObj = arr
    }
  }

}
</script>

<style scoped>
.num-list {
  border: 1px solid red;
  display: inline-block;
  max-width: 0.5em;
  line-height: 60px;
}
</style>